<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_员工列表练习</title>
</head>
<body>
<input type="text" id="i1" placeholder="请输入员工姓名">
<input type="text" id="i2" placeholder="请输入员工工资">
<input type="text" id="i3" placeholder="请输入员工岗位">
<button onclick="add()">添加员工</button>
<hr>
<table border="1">
    <tr id="rr">
        <th class="name">姓名</th>
        <th class="salary">工资</th>
        <th class="post">岗位</th>
    </tr>
</table>
<script>
    //8.创建数组保存员工信息
    let arr = [];
    function add(){
        //1.获取用户输入的数据
        let uname = document.getElementById('i1');
        let salary = document.getElementById('i2');
        let post = document.getElementById('i3');
        //2.创建3个td元素对象
        let td1 = document.createElement('td');
        let td2 = document.createElement('td');
        let td3 = document.createElement('td');
        //3.将用户输入的数据填充到td元素中
        td1.innerHTML = uname.value;
        //console.log(td1)
        td2.innerHTML = salary.value;
        //3.1对用户输入的数据进行校验
        if(!/^\d+$/.test(parseInt(salary.value))){
            alert('工资请输入数字!')
            return;
        }
        //console.log(td2)
        td3.innerHTML = post.value;
        //console.log(td3)
        //4.创建tr元素对象
        let tr = document.createElement('tr');
        //5.将3个td元素追加到tr中
        tr.append(td1);
        tr.append(td2);
        tr.append(td3);
        //6.将tr元素追加到table中
        let table = document.querySelector('table');
        table.append(tr);
        //9.将用户信息追加到数组中
        arr.push({
            uname:uname.value,
            salary:salary.value,
            post:post.value
        })
        console.log(arr);
        //7.清空输入框
        uname.value = '';
        salary.value = '';
        post.value = '';
    }
</script>

</body>
</html>